<template>
  <div class="container index ">
    <swiper :autoplay="{ delay: 5000, disableOnInteraction: true }"  :modules="modules"  :loop="true">
      <swiper-slide v-for="(item, index) in data.topSlide" :key="String(index)">
        <div class="headBox">
          <video class="video" :poster="item.pic_url" :src="item.video_url" autoplay muted playsinline="1" webkit-playsinline="1" v-if="item.video_url"></video>
          <div class="bg" :style="{backgroundImage: `url(${item.pic_url})`}" v-else></div>
          <div class="body flex-y flex-y-center flex-x-center">
            <div class="col-f  txt1 animate__animated animate__fadeInUp">{{item.title}}</div>
            <div class="txt2  col-f animate__animated animate__fadeInUp">{{item.brief}}</div>
            <div class="bottomLine mb-60 animate__animated animate__zoomIn"></div>
            <div class="button-container animate__animated animate__zoomIn">
              <button class="glow-button" style="--btn-color: #ffffff;" @click="scrollToNext">
                了解更多>>

              </button>
            </div>

          </div>
        </div>
      </swiper-slide>
    </swiper>
    <div class="designBox" v-slide>
      <h2 class="title col-2 t-c fnt_40">风格</h2>

      <el-row :gutter="24">
        <el-col :span="12" :xs="24" v-for="item in data.styleList" v-slide>

          <NuxtLink :to="{path: `/article/${item.article_id}`}" class="item cursor">
            <div class="imgBox">
              <img class="img" :src="item.image_url" /> 
            </div>
            <div class="infoMask"></div>
            <div class="infoBox flex-y flex-y-center ">
              <h3 class="titleBox fnt_30 col-f mb-29 one-line-hide px-30 t-c">{{item.title}}</h3>
              <div class="barBox flex-row mb-31">
                <div class="slideBox flex-box"></div>
                <div class="centerBox"></div>
                <div class="slideBox flex-box"></div>
              </div>
              <div class="content fnt_20 col-f line24 five-line-hide">{{item.brief}}
              </div>
            </div>
          </NuxtLink>

        </el-col>

      </el-row>

    </div>
    <div class="swiperBox" v-slide>
      <swiper :loop="true" class="swiper" @swiper="bindSwiper" :modules="[Navigation]">
        <swiper-slide class="swiperItem dis-flex" v-for="(item, index) in data.spaceList" :key="String(index)">
          <el-row :gutter="24" class="rowBox">
            <el-col :span="11" :xs="24">
              <div class="left">
                <img class="titleImg" src="@/assets/images/txtImg1.png" />
                <h3 class="fnt_40 mb-30 one-line-hide">{{item.title}}</h3>
                <p class="fnt_20 col-3 mb-20 line24 three-line-hide">{{item.brief}}</p>
              </div>
            </el-col>
            <el-col :span="13" :xs="24">
              <NuxtLink :to="{path: `/article/${item.article_id}`}" class="right">
                <img class="img" :src="item.image_url" />
              </NuxtLink>
            </el-col>
          </el-row>
        </swiper-slide>
      </swiper>
      <div class="slideBox flex-row" v-if="data.spaceList.length > 1">
        <div class="optionItem dis-flex flex-x-center flex-y-center mr-10" @click="mySwiper.slidePrev()">
          <el-icon>
            <ElIconBack />
          </el-icon>
        </div>
        <div class="optionItem dis-flex flex-x-center flex-y-center" @click="mySwiper.slideNext()">
          <el-icon>
            <ElIconRight />
          </el-icon>
        </div>
      </div>

      <div class="slidePhoneBox flex-row" v-if="data.spaceList.length > 1">
        <div class="optionItem dis-flex flex-x-center flex-y-center mr-10 pre" @click="mySwiper.slidePrev()">
          <el-icon>
            <ElIconBack />
          </el-icon>
        </div>
        <div class="optionItem dis-flex flex-x-center flex-y-center next" @click="mySwiper.slideNext()">
          <el-icon>
            <ElIconRight />
          </el-icon>
        </div>
      </div>
    </div>

  </div>
</template>

<script setup lang="js">
import "swiper/css";
import 'swiper/css/pagination'
import { Navigation,Autoplay } from 'swiper/modules';
 const modules = [Autoplay];
import serverRequest from '~/composables/useServerRequest';
const data = await serverRequest.get('design/index');
/**
 * 头部设置
 */
 const keywords = computed(() => {
  const topSlide = data.topSlide
  const newKeywords =  data.topSlide.map(item => item.title).join(',')
  return newKeywords
});

const description = computed(() => {
  const topSlide = data.topSlide
  const newDescription =  data.topSlide.map(item => item.brief).join(',')
  return newDescription
});
useHead({
  titleTemplate: (titleChunk) => {
    return titleChunk ? `${titleChunk}-设计` : '红河大成房地产';
  },
  meta: [
    { name: 'keyword', content: keywords },
    { name: 'description', content:description }
  ]
})
const pageData = reactive({
  navigation: [
    {
      name: "区位",
      value: "/location",
      id: 1,
    },
    {
      name: "景观",
      value: "/landscape",
      id: 2,
    },
    {
      name: "品质",
      value: "/intellectualProperty/index",
      id: 3,
    },
    {
      name: "服务",
      value: "/article/index",
      id: 4,
    },
    
  ],
  currentIndex:0
  
});
const { navigation,currentIndex} = toRefs(pageData);

let mySwiper = ref([])    // 记得引入reactive
const bindSwiper = (swiper) => {
    mySwiper.value = swiper
}
// 滚动区域的引用
function scrollToNext(){
  window.scrollTo({ top: window.innerHeight - 90, behavior: 'smooth' });
}


</script>

<style lang="scss" scoped>
@use "./index.scss";
</style>
